<template>
  <view class="app-container">
    <!-- 加载状态 - 骨架屏 -->
    <view v-if="loading" class="skeleton-container">
      <!-- 搜索栏骨架屏 -->
      <view class="skeleton-search-bar">
        <view class="skeleton-search-item">
          <view class="skeleton-label"></view>
          <view class="skeleton-input"></view>
        </view>
        <view class="skeleton-search-item">
          <view class="skeleton-label"></view>
          <view class="skeleton-input"></view>
        </view>
        <view class="skeleton-search-btn"></view>
      </view>

      <!-- 家谱列表骨架屏 -->
      <view class="skeleton-genealogy-list">
        <view v-for="i in 3" :key="i" class="skeleton-genealogy-card">
          <view class="skeleton-cover"></view>
          <view class="skeleton-info">
            <view class="skeleton-title"></view>
            <view class="skeleton-desc"></view>
            <view class="skeleton-desc"></view>
            <view class="skeleton-desc"></view>
            <view class="skeleton-desc"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作界面 - 创建/加入家谱 -->
    <view v-if="showFamilyForm" class="operation-container">
      <view class="familyForm">
        <wd-form ref="familyFormRef" :model="familyForm" :rules="familyRules" label-width="100rpx">
          <wd-form-item label="家谱名称" prop="familyName" required>
            <wd-input v-model="familyForm.familyName" placeholder="请输入家谱名称" />
          </wd-form-item>
          <wd-form-item label="家谱发源地" prop="originPlace" required>
            <wd-input v-model="familyForm.originPlace" placeholder="请输入家谱发源地" />
          </wd-form-item>
          <wd-form-item label="行政区划" prop="areaCode" class="wd-form-item-area" required>
            <!-- <view class="area-display" v-if="userMergerName" @click="handleAreaClick">
              <text class="area-text">{{ userMergerName }}</text>
              <text class="area-hint">(点击修改)</text>
            </view> -->
            <wdColPicker v-model="areaCode" @confirm="handleConfirm"></wdColPicker>
          </wd-form-item>
          <wd-form-item label="家谱图腾" prop="totemUrl" required>
            <AvatarUploader v-model="familyForm.totemUrl" />
          </wd-form-item>
          <view class="form-button-group" style="margin-top: 32rpx">
            <wd-button type="primary" @click="submitFamilyForm">提交</wd-button>
            <wd-button type="info" @click="cancelCreateForm">返回</wd-button>
          </view>
        </wd-form>
      </view>
      <!-- <view v-else-if="showOperationSelection" class="operation-selection">
        <view class="book-cover">
          <view class="book-spine"></view>
          <view class="book-content">
            <view class="book-title">家谱管理</view>
            <view class="book-meta-group">
              <view class="book-meta">选择操作：创建或加入家谱</view>
              <view class="book-meta">创建家谱：建立新的家族谱系</view>
              <view class="book-meta">加入家谱：参与现有家族谱系</view>
            </view>
            <view class="book-desc">请选择您想要进行的操作，创建家谱将建立新的家族谱系，加入家谱将参与现有的家族谱系。</view>
          </view>
        </view>
        <view class="action-button-group">
          <wd-button size="small" class="action-button" @click="handleJoinFamily()" type="primary">
            加入家谱
          </wd-button>
          <wd-button size="small" class="action-button" @click="handleCreateFamily()" type="primary">
            创建家谱
          </wd-button>
        </view>
      </view> -->
    </view>
    <!-- 家谱列表界面 -->
    <view v-if="!loading && !showFamilyForm" class="genealogy-list-container">
      <!-- 搜索栏 -->
      <view class="search-bar-beauty">
        <view>
          <view class="search-label">区域</view>
          <input
            v-model="searchSelectedAreaName"
            class="search-input"
            placeholder="请选择所在区域"
            readonly
            @click="showAreaPicker"
          />
        </view>
        <view>
          <view class="search-label">家族名称</view>
          <input
            v-model="queryParams.familyName"
            class="search-input"
            placeholder="请输入家谱名称"
            @confirm="handleQuery"
          />
        </view>
        <view class="clSearch">
          <view></view>
          <button class="search-btn" @click="handleQuery">搜索</button>
        </view>
      </view>

      <!-- 附近家谱列表 -->
      <view class="nearby-families-section">
        <view class="section-title">
          <text class="title-text">推荐家谱</text>
          <text class="title-desc">与您同街道({{ getUserStreet() }})的家谱</text>
        </view>
        <view v-if="nearbyFamilies.length > 0" class="nearby-families-list">
          <view
            v-for="item in nearbyFamilies"
            :key="item.id"
            class="nearby-family-card"
            @click="goToFamilyDetail(item)"
          >
            <view class="nearby-cover">
              <text class="nearby-cover-title">{{ item.familyName }}</text>
            </view>
            <view class="nearby-info">
              <view class="nearby-title">{{ item.familyName }}</view>
              <view class="nearby-desc">{{ item.mergerName }}</view>
              <view class="nearby-desc">创建时间：{{ item.createTime }}</view>
              <view class="nearby-desc main-color">(族长){{ item.nickname || "暂无" }}</view>
              <view class="nearby-desc">入谱人数: {{ item.nums || "--" }}</view>
            </view>
          </view>
        </view>
        <!-- 空内容占位 -->
        <view v-else class="nearby-families-empty">
          <view class="empty-icon">&#128193;</view>
          <view class="empty-text">暂无注册地点附近家谱</view>
          <view class="empty-desc">您所在街道暂无家谱信息</view>
          <view v-if="myFamilyIds.length === 0" class="empty-action" @click="handleCreateFamily">
            创建家谱
          </view>
        </view>
      </view>

      <!-- 全部家谱列表 -->
      <view v-if="!showGenealogyListFlag" class="all-families-section">
        <view class="section-title">
          <text class="title-text">全部家谱</text>
          <text class="title-desc">共 {{ total }} 个家谱</text>
        </view>
        <view class="genealogy-list">
          <view
            v-for="item in pageData"
            :key="item.id"
            class="genealogy-card"
            @click="goToFamilyDetail(item)"
          >
            <view class="cover">
              <text class="cover-title">{{ item.familyName }}</text>
            </view>
            <view class="info">
              <view
                class="title"
                v-html="highlightSearchText(item.familyName, queryParams.familyName)"
              ></view>
              <view
                class="desc"
                v-html="highlightSearchText(item.mergerName, queryParams.familyName)"
              ></view>
              <view class="desc">创建时间：{{ item.createTime }}</view>
              <view
                class="desc main-color"
                v-html="
                  highlightSearchText('(族长)' + (item.nickname || '暂无'), queryParams.familyName)
                "
              ></view>
              <view class="desc">入谱人数: {{ item.nums || "--" }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 区域选择器弹窗 -->
      <wd-popup v-model="areaPickerVisible" position="bottom" @close="handleClose">
        <view class="picker-container">
          <view class="picker-header">
            <text class="picker-title">选择区域</text>
            <text class="picker-close" @click="closeAreaPicker">关闭</text>
          </view>
          <view class="picker-status">
            <text class="status-text">已选择: {{ getSelectedAreaText() }}</text>
          </view>
          <picker-view :value="areaPickerValue" class="picker-view" @change="onAreaPickerChange">
            <picker-view-column>
              <view v-for="item in provinceList" :key="item.areaCode" class="picker-item">
                {{ item.name }}
              </view>
              <view v-if="loadingProvince" class="picker-item picker-loading">加载中...</view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="item in cityList" :key="item.areaCode" class="picker-item">
                {{ item.name }}
              </view>
              <view v-if="loadingCity" class="picker-item picker-loading">加载中...</view>
              <view v-if="!loadingCity && cityList.length === 0" class="picker-item picker-empty">
                请先选择省份
              </view>
            </picker-view-column>
            <picker-view-column>
              <view v-for="item in districtList" :key="item.areaCode" class="picker-item">
                {{ item.name }}
              </view>
              <view v-if="loadingDistrict" class="picker-item picker-loading">加载中...</view>
              <view
                v-if="!loadingDistrict && districtList.length === 0"
                class="picker-item picker-empty"
              >
                请先选择城市
              </view>
            </picker-view-column>
          </picker-view>
          <view class="picker-footer">
            <button class="btn btn-default" @click="resetAreaPicker">重置区域</button>
            <button class="btn btn-primary" @click="confirmAreaSelection">确定</button>
          </view>
        </view>
      </wd-popup>
    </view>
  </view>
</template>

<script>
// import { log } from "console";
import FamilyAPI from "@/api/genealogy/family";
import RegionAPI from "@/api/system/region";
import { useUserStore } from "@/store/modules/user";
import wdColPicker from "@/components/wd-picker/index.vue";
import AvatarUploader from "@/components/AvatarUploader/AvatarUploader.vue";
export default {
  name: "GenealogyIndex",
  components: {
    wdColPicker,
    AvatarUploader,
  },
  data() {
    return {
      showGenealogyListFlag: false,
      cityFlag: "",
      myFamilyIds: [], // 我的家谱ID列表
      pickerArr: [], // 城市选择器
      areaArr: [], // 城市选择器
      loading: false, // 骨架屏加载控制器
      removeIds: [],
      total: 0,
      pageData: [],
      queryParams: {
        familyName: "",
        pageNum: 1,
        pageSize: 100,
        type: "region",
        areaCode: null,
      },
      // 添加家谱表单数据
      familyForm: {
        familyName: "",
        originPlace: "",
        areaCode: "",
        totem: "",
      },
      // 用户行政区划信息
      userMergerName: "",
      areaCode: [],
      // 家谱校验规则
      familyRules: {
        familyName: [{ required: true, message: "请输入家谱名称" }],
        originPlace: [{ required: true, message: "请输入家谱发源地" }],
        areaCode: [{ required: true, message: "请选择行政区划" }],
        totem: [{ required: true, message: "请上传家谱图腾" }],
      },
      searchSelectedAreaName: "",

      // 区域选择器相关
      areaPickerValue: [0, 0, 0],
      provinceList: [],
      cityList: [],
      districtList: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null,
      areaPickerVisible: false,

      // 区域选择器加载状态
      loadingProvince: false,
      loadingCity: false,
      loadingDistrict: false,

      // 用户信息
      userFamilyId: null,
      baseFlag: null,

      // 弹窗相关
      showDetailPopup: false,
      currentFamily: null,
      showOperation: false, // 初始页面展示内容
      showFamilyForm: false, // 家谱表单是否展示

      // 附近家谱列表
      nearbyFamilies: [],
      nearbyLoading: false,
      userMergerName: "", // 用户当前区域
    };
  },
  computed: {
    isAllSelected() {
      return this.pageData.length > 0 && this.removeIds.length === this.pageData.length;
    },
    // 是否显示操作界面（创建/加入家谱）
    shouldShowOperation() {
      return this.showOperation || this.showFamilyForm;
    },
    // 是否显示家谱列表界面
    showGenealogyList() {
      return !this.loading && !this.shouldShowOperation;
    },
    // 是否显示创建家谱表单
    showCreateForm() {
      return this.showOperation && this.showFamilyForm;
    },
    // 是否显示操作选择界面
    showOperationSelection() {
      return this.showOperation && !this.showFamilyForm;
    },
    // 页面当前状态
    pageState() {
      if (this.loading) return "loading";
      if (this.shouldShowOperation) return "operation";
      return "list";
    },
  },
  onLoad(query) {
    if (query && query.city) {
      // 设置查询参数中的区域码
      this.cityFlag = query.city;
      this.showGenealogyListFlag = true;
    }

    // 检查是否从详情页面跳转
    if (query && query.fromDetail === "true") {
      // 从详情页面跳转
      this.showOperation = false;
      this.showFamilyForm = false;
      this.initUserInfo();
      this.handleQuery();
      this.loadProvinceList();

      // 检查是否要显示创建表单
      if (query && query.showCreateForm === "true") {
        // this.showOperation = true;
        this.showFamilyForm = true;
      }

      // 检查是否要重新申请（被拒绝状态）
      if (query && query.reapply === "true") {
        this.showOperation = false;
        this.showFamilyForm = false;
        // 显示提示信息
        uni.showToast({
          title: "请重新选择要加入的家谱",
          icon: "none",
          duration: 2000,
        });
      }
    } else {
      // 正常流程
      this.initUserInfo();
      this.handleQuery();
      this.loadProvinceList();
      this.checkFamily();
    }
  },
  methods: {
    // 根据城市名称获取区域码
    getAreaCodeFromCity(city) {},
    submitFamilyForm() {
      // 判断表单数据是否为空
      if (!this.familyForm.familyName) {
        uni.showToast({
          title: "请输入家谱名称",
          icon: "none",
        });
        return;
      }
      if (!this.familyForm.originPlace) {
        uni.showToast({
          title: "请输入家谱发源地",
          icon: "none",
        });
        return;
      }
      if (!this.familyForm.areaCode) {
        uni.showToast({
          title: "请选择行政区划",
          icon: "none",
        });
        return;
      }
      if (!this.familyForm.totemUrl) {
        uni.showToast({
          title: "请输入家谱图腾",
          icon: "none",
        });
        return;
      }
      FamilyAPI.createFamily(this.familyForm).then(() => {
        uni.showToast({
          title: "创建成功",
          icon: "success",
        });
        setTimeout(() => {
          this.showFamilyForm = false;
          this.showOperation = false;
          this.handleQuery();
        }, 1000);
      });
    },
    // 返回上一层
    cancelCreateForm() {
      uni.navigateBack({
        delta: 1,
      });
    },
    handleConfirm(e) {
      if (Array.isArray(e.value) && e.value.length > 0) {
        this.familyForm.areaCode = e.value[e.value.length - 1];
      }
    },

    // 处理行政区划点击事件
    handleAreaClick() {
      // 隐藏显示的用户mergerName
      this.userMergerName = "";
      // 触发wdColPicker的handleConfirm事件
      this.$nextTick(() => {
        // 模拟触发wdColPicker的confirm事件
        const mockEvent = {
          value: [],
          selectedItems: [],
        };
        console.log(mockEvent);
        this.handleConfirm(mockEvent);
      });
    },
    handleClose() {},
    // 初始化用户信息
    initUserInfo() {
      const userStore = useUserStore();
      this.userFamilyId = userStore.userInfo.userFamilyId;
      this.baseFlag = userStore.userInfo.baseFlag;
      this.userMergerName = userStore.userInfo.mergerName; // 初始化用户mergerName
    },

    // 查询家谱列表
    handleQuery() {
      // 构建查询参数
      const queryData = {
        familyName: this.queryParams.familyName,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        areaCode: this.queryParams.areaCode || "",
      };

      // 根据类型决定是否包含区域过滤
      if (this.queryParams.type === "region" && this.queryParams.areaCode) {
        // 区域查询，添加区域代码
        queryData.areaCode = this.queryParams.areaCode || "";
      }
      FamilyAPI.getPage(queryData)
        .then((data) => {
          // 对获取到的数据进行地址模糊搜索
          let filteredData = data.list;

          if (this.queryParams.familyName && this.queryParams.familyName.trim()) {
            const searchKeyword = this.queryParams.familyName.trim().toLowerCase();

            // 模糊搜索地址字段（mergerName）
            filteredData = data.list.filter((item) => {
              // 搜索家谱名称
              const familyNameMatch =
                item.familyName && item.familyName.toLowerCase().includes(searchKeyword);

              // 搜索地址信息（mergerName）
              const addressMatch =
                item.mergerName && item.mergerName.toLowerCase().includes(searchKeyword);

              // 搜索族长信息
              const leaderMatch =
                item.nickname && item.nickname.toLowerCase().includes(searchKeyword);

              // 返回任一字段匹配的结果
              return familyNameMatch || addressMatch || leaderMatch;
            });
          }

          this.pageData = filteredData;
          this.total = filteredData.length; // 更新总数为筛选后的数量
          // 获取家谱列表后，筛选附近家谱
          this.getNearbyFamilies();

          filteredData = filteredData.filter((item) => {
            // 确保item.mergerName存在且包含cityFlag中的区域信息
            return item.mergerName && item.mergerName.includes(this.cityFlag);
          });

          this.loading = false;
          // if(this.queryParams.type === 'region') {
          //   this.searchSelectedAreaName = this.getSelectedAreaText();
          // }
        })
        .catch((error) => {
          console.error("查询家谱列表失败:", error);
          uni.showToast({
            title: "查询失败",
            icon: "none",
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取附近家谱列表
    getNearbyFamilies() {
      this.nearbyLoading = true;
      // 获取用户信息
      const userStore = useUserStore();
      const userInfo = userStore.userInfo;

      // 设置用户mergerName
      this.userMergerName = userInfo?.mergerName || "";

      // 如果没有用户信息或mergerName，则不显示附近家谱
      if (!userInfo || !userInfo.mergerName) {
        this.nearbyFamilies = [];
        this.nearbyLoading = false;
        return;
      }
      // 将用户的mergerName拆分成数组
      // const userMergerParts = userInfo.mergerName.split(',');
      // 从后往前筛选附近家谱数据
      // let nearbyFamilies = [];
      // for (let i = userMergerParts.length - 1; i >= 0; i--) {
      //   const part = userMergerParts[i].trim();
      //   // 根据当前部分筛选匹配的家谱
      //   const matchedFamilies = this.pageData.filter(item => {
      //     return item.mergerName && item.mergerName.includes(part) &&
      //       !nearbyFamilies.some(nearby => nearby.id === item.id); // 避免重复
      //   });

      //   // 将匹配的家谱添加到结果中
      //   nearbyFamilies = nearbyFamilies.concat(matchedFamilies);
      // }
      // 从现有的家谱列表中筛选相同街道的家谱
      const nearbyFamilies = this.pageData.filter((item) => {
        return this.isSameStreet(item.mergerName, userInfo.mergerName);
      });

      // 限制最多显示3个
      this.nearbyFamilies = nearbyFamilies.slice(0, 1);
      this.nearbyLoading = false;
    },

    // 判断是否为相同街道
    isSameStreet(itemMergerName, userMergerName) {
      if (!itemMergerName || !userMergerName) return false;

      // 提取街道信息（如"滕王阁街道,章江路社区居委会"中的"滕王阁街道"）
      const extractStreet = (mergerName) => {
        // 按逗号分割，取第一部分作为街道信息
        const parts = mergerName.split(",");
        if (parts.length > 0) {
          // 查找包含"街道"的部分
          const streetPart = parts.find((part) => part.includes("街道"));
          if (streetPart) {
            return streetPart.trim();
          }
          // 查找包含"镇"的部分
          const townPart = parts.find((part) => part.includes("镇"));
          if (townPart) {
            return townPart.trim();
          }
          // 查找包含"区"的部分
          const villagePart = parts.find((part) => part.includes("区"));
          if (villagePart) {
            return villagePart.trim();
          }
          // 如果没有找到特定标识，取第一部分
          return parts[0].trim();
        }
        return mergerName.trim();
      };

      const itemStreet = extractStreet(itemMergerName);
      const userStreet = extractStreet(userMergerName);

      // 比较街道信息（不区分大小写）
      return itemStreet.toLowerCase() === userStreet.toLowerCase();
    },

    // 获取用户当前街道信息
    getUserStreet() {
      const userStore = useUserStore();
      const userInfo = userStore.userInfo;

      if (!userInfo || !userInfo.mergerName) return "";

      // 提取街道信息
      const parts = userInfo.mergerName.split(",");
      if (parts.length > 0) {
        // 查找包含"街道"的部分
        const streetPart = parts.find((part) => part.includes("街道"));
        console.log(streetPart);
        if (streetPart) {
          return streetPart.trim();
        }
        // 查找包含"镇"的部分
        const townPart = parts.find((part) => part.includes("镇"));
        if (townPart) {
          return townPart.trim();
        }
        // 查找包含"区"的部分
        const villagePart = parts.find((part) => part.includes("区"));
        if (villagePart) {
          return villagePart.trim();
        }
        // 如果没有找到特定标识，取第一部分
        return parts[0].trim();
      }
      return userInfo.mergerName.trim();
    },

    // 重置查询
    handleResetQuery() {
      this.queryParams = {
        familyName: "",
        pageNum: 1,
        pageSize: 10,
        type: "region",
        areaCode: 0,
      };
      this.searchSelectedAreaName = "";
      this.handleQuery();
    },

    // 选择变化
    handleSelectionChange(id) {
      const index = this.removeIds.indexOf(id);
      if (index > -1) {
        this.removeIds.splice(index, 1);
      } else {
        this.removeIds.push(id);
      }
    },

    // 全选
    handleSelectAll(e) {
      if (e.detail.value) {
        this.removeIds = this.pageData.map((item) => item.id);
      } else {
        this.removeIds = [];
      }
    },

    // 分页变化
    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.handleQuery();
    },

    // 加入家谱
    joinFamily(familyId) {
      const currentFamily = this.pageData.find((item) => item.id === familyId);

      if (!currentFamily) {
        uni.showToast({
          title: "家谱信息不存在",
          icon: "none",
        });
        return;
      }

      // 根据家谱状态智能跳转
      switch (true) {
        case currentFamily.activedStatus === 1:
          // 已加入状态 - 跳转到家谱详情页面
          this.handleViewFamily(familyId);
          break;

        case currentFamily.joinStatus === 1:
          // 等待入谱状态 - 跳转到支付确认页面
          this.handlePayment(familyId);
          break;

        case currentFamily.joinStatus === 0:
          // 审核中状态 - 显示审核提示
          this.handlePendingReview();
          break;

        case currentFamily.joinStatus === 2:
          // 被拒绝状态 - 重新申请
          this.handleRejectedApplication(familyId);
          break;

        default:
          // 未加入状态 - 选择加入方式
          this.handleNewApplication(familyId);
          break;
      }
    },

    // 跳转到家谱详情页
    goToFamilyDetail(item) {
      // 检查是否从被拒绝状态跳转
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const options = currentPage.options;

      // 如果是从被拒绝状态跳转，添加标记
      if (options && options.reapply === "true") {
        item.fromReapply = true;
      }

      // 检查当前用户是否有待审核的申请
      const userStore = useUserStore();
      const userInfo = userStore.userInfo;
      if (userInfo) {
        // 检查用户是否有待审核的申请
        this.checkUserPendingApplication(item);
      }

      // 仍然保留本地存储，用于兼容旧逻辑
      uni.setStorageSync("selectedFamily", JSON.stringify(item));

      // 使用路由参数传递familyId，detail.vue会使用getDetailCheck接口获取数据
      uni.navigateTo({
        url: `/pages/genealogy/detail?familyId=${item.id}`,
      });
    },

    // 检查用户是否有待审核的申请
    checkUserPendingApplication(item) {
      // 这里可以根据实际业务逻辑检查用户的申请状态
      // 暂时使用一个简单的判断逻辑
      const userStore = useUserStore();
      const userInfo = userStore.userInfo;

      if (userInfo && userInfo.userFamilyId) {
        // 如果用户已经有家谱ID，说明可能有待审核的申请
        // 这里可以调用API检查具体的申请状态
        // 暂时设置为false，实际应该根据API返回结果设置
        item.hasPendingApplication = false;
      }
    },

    // 查看家谱详情
    handleViewFamily(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/person/index?familyId=${familyId}`,
      });
    },

    // 处理支付确认
    handlePayment(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/payment?familyId=${familyId}`,
      });
    },

    // 处理审核中状态
    handlePendingReview() {
      uni.showModal({
        title: "申请审核中",
        content: "您的加入申请正在审核中，请耐心等待。审核结果将通过消息通知您。",
        showCancel: false,
        confirmText: "知道了",
      });
    },

    // 处理被拒绝的申请
    handleRejectedApplication(familyId) {
      uni.showModal({
        title: "申请被拒绝",
        content: "您的申请被拒绝，拒绝理由请查阅通知。是否重新申请？",
        confirmText: "重新申请",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            this.handleNewApplication(familyId);
          }
        },
      });
    },

    // 处理新申请
    handleNewApplication(familyId) {
      uni.showActionSheet({
        title: "选择加入方式",
        itemList: ["填写家谱信息申请", "使用激活码快速加入"],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              // 填写家谱信息申请
              this.openJoinWebview(familyId);
              break;
            case 1:
              // 使用激活码快速加入
              this.openActivationWebview(familyId);
              break;
          }
        },
      });
    },

    // 打开申请加入webview
    openJoinWebview(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/join?familyId=${familyId}`,
        success: () => {
          console.log("跳转到申请加入页面:", familyId);
        },
        fail: (err) => {
          console.error("跳转失败:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    },

    // 打开激活码webview
    openActivationWebview(familyId) {
      uni.navigateTo({
        url: `/pages/genealogy/activation?familyId=${familyId}`,
        success: () => {
          console.log("跳转到激活码页面:", familyId);
        },
        fail: (err) => {
          console.error("跳转失败:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    },

    // 获取加入按钮样式
    getJoinButtonClass(item) {
      if (item.activedStatus === 1) return "btn-success";
      if (item.joinStatus === 1) return "btn-info";
      if (item.joinStatus === 0) return "btn-warning";
      if (item.joinStatus === 2) return "btn-danger";
      return "btn-primary";
    },

    // 获取加入按钮文本
    getJoinButtonText(item) {
      if (item.activedStatus === 1) return "查看家谱";
      if (item.joinStatus === 1) return "等待入谱";
      if (item.joinStatus === 0) return "审核中";
      if (item.joinStatus === 2) return "被拒绝";
      return "加入家谱";
    },

    // 获取按钮提示信息
    getButtonTooltip(item) {
      if (item.activedStatus === 1) return "点击查看家谱详情";
      if (item.joinStatus === 1) return "点击确认入谱并消耗指标";
      if (item.joinStatus === 0) return "申请正在审核中，请耐心等待";
      if (item.joinStatus === 2) return "申请被拒绝，点击重新申请";
      return "点击选择加入方式";
    },

    // 获取状态图标
    getStatusIcon(item) {
      if (item.activedStatus === 1) return "&#xe600;"; // 查看家谱图标
      if (item.joinStatus === 1) return "&#xe601;"; // 等待入谱图标
      if (item.joinStatus === 0) return "&#xe602;"; // 审核中图标
      if (item.joinStatus === 2) return "&#xe603;"; // 被拒绝图标
      return "&#xe604;"; // 加入家谱图标
    },

    // 打开编辑对话框
    handleOpenDialog(id) {
      uni.navigateTo({
        url: `/pages/genealogy/edit?id=${id || ""}`,
      });
    },

    // 打开修缮家谱
    handleOpenDialog1(id) {
      uni.navigateTo({
        url: `/pages/genealogy/person/index?familyId=${id}`,
      });
    },

    // 删除家谱
    handleDelete(id) {
      const ids = id || this.removeIds.join(",");
      if (!ids) {
        uni.showToast({
          title: "请勾选删除项",
          icon: "none",
        });
        return;
      }

      uni.showModal({
        title: "警告",
        content: "确认删除已选中的数据项?",
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            FamilyAPI.deleteByIds(ids)
              .then(() => {
                uni.showToast({
                  title: "删除成功",
                  icon: "success",
                });
                this.handleResetQuery();
              })
              .finally(() => {
                this.loading = false;
              });
          }
        },
      });
    },

    // 显示区域选择器
    showAreaPicker() {
      this.areaPickerVisible = true;
    },
    showAreaPickerFamily() {
      console.log(1);
    },

    // 关闭区域选择器
    closeAreaPicker() {
      this.areaPickerVisible = false;
    },
    // 重置搜索内容
    resetAreaPicker() {
      this.searchSelectedAreaName = "";
      this.queryParams.areaCode = "";
      // // 关闭选择器弹窗
      this.areaPickerVisible = false;

      // 重新查询数据（不带区域筛选）
      this.handleQuery();
    },

    // 区域选择器变化
    onAreaPickerChange(e) {
      const values = e.detail.value;

      // 判断省份是否变化
      if (values[0] !== this.areaPickerValue[0]) {
        // 省份变了，重置市和区，并加载新的城市列表
        this.areaPickerValue = [values[0], 0, 0];
        this.cityList = []; // 清空城市列表
        this.districtList = []; // 清空区县列表
        this.loadCityList(values[0]);
      } else if (values[1] !== this.areaPickerValue[1]) {
        // 市变了，重置区，并加载新的区县列表
        this.areaPickerValue = [values[0], values[1], 0];
        this.districtList = []; // 清空区县列表
        this.loadDistrictList(values[0], values[1]);
      } else {
        // 只区变了，直接更新选择值
        this.areaPickerValue = values;
      }
    },

    // 确认区域选择
    confirmAreaSelection() {
      const province = this.provinceList[this.areaPickerValue[0]];
      const city = this.cityList[this.areaPickerValue[1]];
      const district = this.districtList[this.areaPickerValue[2]];

      // 检查是否完整选择了省市区
      if (!province) {
        uni.showToast({
          title: "请选择省份",
          icon: "none",
        });
        return;
      }

      if (!city) {
        uni.showToast({
          title: "请选择城市",
          icon: "none",
        });
        return;
      }

      if (!district) {
        uni.showToast({
          title: "请选择区县",
          icon: "none",
        });
        return;
      }

      // 设置查询参数
      this.queryParams.areaCode = district.areaCode;
      console.log("Selected Area Code:", province.name, city.name);
      this.searchSelectedAreaName = `${province.name} - ${city.name} - ${district.name}`;
      this.closeAreaPicker();
      this.handleQuery();
    },

    // 加载省份列表
    loadProvinceList() {
      this.loadingProvince = true;
      RegionAPI.getOptions({ type: 0, areaCode: 0 })
        .then((data) => {
          this.areaArr = [
            data.map((item) => ({
              label: item.name,
              value: item.areaCode,
            })),
          ];
          this.provinceList = data;
          this.areaPickerValue = [0, 0, 0];
          this.cityList = []; // 初始化时清空城市列表
          this.districtList = []; // 初始化时清空区县列表
          if (data.length > 0) {
            // 加载第一个省份的城市列表
            this.loadCityList(0);
          }
        })
        .catch((error) => {
          console.error("加载省份列表失败:", error);
          uni.showToast({
            title: "加载省份列表失败",
            icon: "none",
          });
        })
        .finally(() => {
          this.loadingProvince = false;
        });
    },
    // 通过点击省份的item值，加载城市列表
    loadCityListByProvince(province) {
      this.loadingCity = true;
      this.cityList = [];
      this.districtList = [];
      this.loadCityListTo(province.areaCode);
    },

    // 加载城市列表
    loadCityList(provinceIndex) {
      this.loadingCity = true;
      const province = this.provinceList[provinceIndex];
      if (province) {
        RegionAPI.getOptions({ type: 1, areaCode: province.areaCode })
          .then((data) => {
            this.cityList = data;
            this.areaPickerValue[1] = 0;
            this.areaPickerValue[2] = 0;
            this.districtList = []; // 清空区县列表

            if (data.length > 0) {
              // 加载第一个城市的区县列表
              this.loadDistrictList(provinceIndex, 0);
            }
          })
          .catch((error) => {
            console.error("加载城市列表失败:", error);
            uni.showToast({
              title: "加载城市列表失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.loadingCity = false;
          });
      } else {
        this.cityList = [];
        this.districtList = [];
      }
    },

    // 加载区县列表
    loadDistrictList(provinceIndex, cityIndex) {
      this.loadingDistrict = true;
      const city = this.cityList[cityIndex];
      if (city) {
        RegionAPI.getOptions({ type: 2, areaCode: city.areaCode })
          .then((data) => {
            this.districtList = data;
            this.areaPickerValue[2] = 0;
          })
          .catch((error) => {
            console.error("加载区县列表失败:", error);
            uni.showToast({
              title: "加载区县列表失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.loadingDistrict = false;
          });
      } else {
        this.districtList = [];
      }
    },

    // 获取已选择区域的文本
    getSelectedAreaText() {
      const province = this.provinceList[this.areaPickerValue[0]];
      const city = this.cityList[this.areaPickerValue[1]];
      const district = this.districtList[this.areaPickerValue[2]];

      if (!province) return "请选择区域";
      if (!city) return `${province.name} - 请选择城市`;
      if (!district) return `${province.name} - ${city.name} - 请选择区县`;
      return `${province.name} - ${city.name} - ${district.name}`;
    },

    // 创建家谱
    handleCreateFamily() {
      // 检查是否从详情页面跳转
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const options = currentPage.options;
      if (Boolean(options) && options.fromDetail === "true" && options.showCreateForm === "true") {
        // 从详情页面跳转且要显示创建表单
        this.showOperation = true;
        this.showFamilyForm = true;
      } else {
        // 正常流程
        this.showFamilyForm = true;
      }
    },
    // 加入家谱
    handleJoinFamily() {
      // 检查是否从详情页面跳转
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const options = currentPage.options;

      if (options.fromDetail === "true") {
        // 从详情页面跳转，直接显示家谱列表
        this.showOperation = false;
        this.handleQuery();
      } else {
        // 正常流程，显示操作界面
        this.showOperation = false;
      }
    },
    // 判断当前用户是否存在家谱数据
    checkFamily() {
      this.loading = true; // 开始加载
      FamilyAPI.getMyDetail({
        pageNum: 1,
        pageSize: 100,
      })
        .then((res) => {
          if (res.list.length > 0) {
            this.showOperation = false;
            this.showFamilyForm = false;
            // 保存我的家谱ID
            this.myFamilyIds = res.list.map((item) => item.id);
          } else {
            this.showOperation = true;
            this.myFamilyIds = [];
          }
          this.loading = false; // 结束加载
        })
        .catch(() => {
          this.loading = false; // 结束加载
          this.myFamilyIds = [];
        });
    },
    //
    shouldShowApplyButton(item) {
      // 只要有我的家谱，其他家谱都不显示“申请加入”
      if (this.myFamilyIds && this.myFamilyIds.length > 0) {
        // 只允许我的家谱显示“申请加入”或“被拒绝”等按钮
        return this.myFamilyIds.includes(item.id);
      }
      // 没有家谱时，全部可申请
      return true;
    },
    // 高亮搜索文本
    highlightSearchText(text, keyword) {
      // 如果 text 为 null 或 undefined，返回空字符串或默认值
      if (!text) return text || "";
      if (!keyword) return text;
      const regex = new RegExp(`(${keyword})`, "gi");
      return text.replace(regex, '<span style="color: #e95d2a; font-weight: bold;">$1</span>');
    },
  },
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: "发现有趣的家谱文化",
      path: "/pages/genealogy/index",
      // imageUrl: "/static/images/default_banner.png"
    };
  },
  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: "发现有趣的家谱文化",
      query: "share=true",
      // imageUrl: "/static/images/default_banner.png"
    };
  },
};
</script>

<style scoped>
.empty-action {
  margin-top: 30rpx;
  padding: 10rpx 30rpx;
  background: #e95d2a;
  color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
  cursor: pointer;
}

.empty-action:active {
  background: #c94c1e;
}
/* 在样式部分添加以下内容 */

.nearby-families-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  text-align: center;
}

.empty-icon {
  font-size: 80rpx;
  color: #bfa36b;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 10rpx;
  font-weight: bold;
}

.empty-desc {
  font-size: 26rpx;
  color: #ccc;
}

:deep(.wd-form-item-area .wd-cell__right) {
  margin-top: 10px !important;
}

:deep(.wd-cell__wrapper) {
  display: block !important;
}

.app-container {
  background: #f5e9da;
  min-height: calc(100vh - 4rem);
}

.banner {
  position: relative;
  border-radius: 32rpx;
  overflow: hidden;
  text-align: center;
  width: 80%;
  margin: 0 auto;
  padding: 1rem;
}

.banner-img {
  width: 100%;
  height: 220rpx;
  object-fit: cover;
}

.banner-title {
  font-size: 40rpx;
  color: #e95d2a;
  font-weight: bold;
  margin-top: -60rpx;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 8rpx #fff;
}

.main-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 32rpx;
  font-size: 32rpx;
  padding: 18rpx 0;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.15);
}

.search-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  margin: 30rpx 20rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.label {
  font-size: 30rpx;
  color: #bfa36b;
  font-weight: bold;
  min-width: 80rpx;
}

.input {
  flex: 1;
  border: 2rpx solid #e95d2a;
  border-radius: 16rpx;
  background: #fdf6ec;
  font-size: 30rpx;
  padding: 16rpx;
  color: #333;
}

.genealogy-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  padding-top: 20rpx;
}

.genealogy-card {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  height: 10rem;
}

.genealogy-card:hover {
  box-shadow: 0 6rpx 24rpx rgba(233, 93, 42, 0.18);
  transform: translateY(-4rpx) scale(1.02);
}

.cover {
  width: 120rpx;
  background: linear-gradient(180deg, #e95d2a 0%, #f5e9da 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
}

.cover-title {
  color: #fff;
  font-size: 32rpx;
  writing-mode: vertical-rl;
  font-weight: bold;
  letter-spacing: 2rpx;
  line-height: 1.4;
  overflow: hidden;
}

.info {
  flex: 1;
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  background-color: #f9f9f9;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.desc {
  font-size: 26rpx;
  color: #666;
}

.main-color {
  color: #e95d2a;
  font-weight: bold;
}

.search-bar {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.1);
  padding: 40rpx 30rpx 30rpx 30rpx;
  margin-bottom: 30rpx;
}

.area-selector {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.area-input-highlight {
  border: 2rpx solid #409eff;
  background: #f0f7ff;
  color: #409eff;
  font-weight: bold;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.label {
  min-width: 120rpx;
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
}

.radio-group {
  display: flex;
  gap: 10rpx;
}

.radio-button {
  padding: 10rpx 24rpx;
  border: 2rpx solid #ddd;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.2s;
}

.radio-button.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}

.input {
  flex: 1;
  padding: 18rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 30rpx;
  background: #f9f9f9;
}

.form-actions {
  display: flex;
  gap: 30rpx;
  justify-content: center;
  margin-top: 20rpx;
}

.btn {
  border-radius: 10rpx;
  font-size: 30rpx;
  border: none;
  transition: box-shadow 0.2s;
}

.btn-primary {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.15);
}

.btn-success {
  background: linear-gradient(90deg, #67c23a 0%, #95d475 100%);
  color: #fff;
}

.btn-danger {
  background: linear-gradient(90deg, #f56c6c 0%, #f89898 100%);
  color: #fff;
}

.btn-default {
  background: #fff;
  color: #409eff;
  border: 2rpx solid #409eff;
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.family-list {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.list-header {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.table-container {
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  border: none;
}

.table-header {
  display: flex;
  background: #f0f7ff;
  border-bottom: 2rpx solid #eee;
}

.table-row {
  display: flex;
  border-bottom: 2rpx solid #f5f5f5;
  transition: background 0.2s;
}

.table-row:hover {
  background: #eaf6ff;
}

.table-row:last-child {
  border-bottom: none;
}

.th,
.td {
  padding: 22rpx 10rpx;
  font-size: 28rpx;
  text-align: center;
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

.th {
  font-weight: bold;
  color: #333;
}

.td {
  color: #666;
}

.checkbox {
  flex: 0 0 80rpx;
}

.actions {
  margin-top: 16rpx;
  text-align: right;
}

.join-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 24rpx;
  font-size: 26rpx;
  padding: 10rpx 32rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
}

.join-btn:active {
  background: #c94c1e;
}

.btn-link {
  background: none;
  border: none;
  font-size: 26rpx;
  padding: 8rpx 14rpx;
  border-radius: 6rpx;
  transition: background 0.2s;
}

.btn-link.btn-primary {
  color: #409eff;
}

.btn-link.btn-success {
  color: #67c23a;
}

.btn-link.btn-danger {
  color: #f56c6c;
}

.btn-link.btn-info {
  color: #909399;
}

.btn-link.btn-warning {
  color: #e6a23c;
}

.btn-link:hover {
  background: #f0f7ff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
  margin-top: 40rpx;
}

.page-info {
  font-size: 30rpx;
  color: #409eff;
  font-weight: bold;
}

.picker-container {
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 40rpx 30rpx 30rpx 30rpx;
  box-shadow: 0 -4rpx 24rpx rgba(64, 158, 255, 0.1);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
  margin-bottom: 20rpx;
}

.picker-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #409eff;
}

.picker-close {
  font-size: 30rpx;
  color: #909399;
}

.picker-status {
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  border-bottom: 2rpx solid #eee;
}

.status-text {
  font-size: 28rpx;
  color: #666;
}

.picker-view {
  height: 420rpx;
}

.picker-item {
  line-height: 90rpx;
  text-align: center;
  font-size: 30rpx;
}

.picker-empty {
  color: #909399;
  font-size: 30rpx;
}

.picker-loading {
  color: #909399;
  font-size: 30rpx;
}

.picker-loading::after {
  content: "";
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #409eff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-left: 10rpx;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.picker-footer {
  margin-top: 30rpx;
  text-align: center;
  display: flex;
  justify-content: space-around;
  gap: 30rpx;
}

.family-detail-popup {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx 30rpx 30rpx;
  width: 540rpx;
  box-shadow: 0 4rpx 24rpx rgba(191, 163, 107, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.popup-close-btn {
  position: absolute;
  right: 24rpx;
  top: 18rpx;
  font-size: 40rpx;
  color: #bbb;
  z-index: 2;
  cursor: pointer;
}

.popup-cover {
  width: 180rpx;
  height: 220rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  object-fit: cover;
  background: #f5e9da;
}

.popup-info {
  width: 100%;
  margin-bottom: 24rpx;
}

.popup-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  text-align: center;
}

.popup-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
  text-align: center;
}

.popup-join-btn {
  background: #e95d2a;
  color: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  padding: 14rpx 0;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
}

.search-bar-beauty {
  display: flex;
  align-items: center;
  gap: 18rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.08);
  padding: 18rpx 24rpx;
  flex-wrap: wrap;
}

.search-label {
  font-size: 24rpx;
  color: #bfa36b;
  margin-right: 6rpx;
  min-width: 48rpx;
}

.search-input {
  border: 1.5rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #f7fafd;
  font-size: 26rpx;
  padding: 10rpx 18rpx;
  color: #333;
  min-width: 120rpx;
  max-width: 220rpx;
  box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.04);
  margin-right: 8rpx;
}

.clSearch {
  display: flex;
  position: relative;
}

.search-btn {
  background: linear-gradient(90deg, #e95d2a 0%, #ffb980 100%);
  color: #fff;
  border-radius: 12rpx;
  font-size: 22rpx;
  padding: 0 22rpx;
  min-width: 60rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
  transition: background 0.2s;
  position: absolute;
  bottom: -1.4rem;
  width: 3rem;
}

.search-btn:active,
.search-btn:hover {
  background: linear-gradient(90deg, #c94c1e 0%, #e95d2a 100%);
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 20rpx;
  background: #f5e9da;
  min-height: calc(100vh - 4rem);
}

.skeleton-search-bar {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  padding: 30rpx 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.skeleton-search-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.skeleton-label {
  width: 120rpx;
  height: 36rpx;
  background: #fff;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

.skeleton-input {
  flex: 1;
  height: 36rpx;
  background: #fff;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

.skeleton-search-btn {
  width: 100rpx;
  height: 40rpx;
  background: #fff;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 10rpx;
}

.skeleton-genealogy-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.skeleton-genealogy-card {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.05);
  overflow: hidden;
  height: 10rem;
}

.skeleton-cover {
  width: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.skeleton-info {
  flex: 1;
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.skeleton-title {
  width: 80%;
  height: 36rpx;
  background: #fff;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

.skeleton-desc {
  width: 60%;
  height: 24rpx;
  background: #fff;
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

.skeleton-desc:nth-child(2) {
  width: 70%;
}

.skeleton-desc:nth-child(3) {
  width: 50%;
}

.skeleton-desc:nth-child(4) {
  width: 40%;
}

.skeleton-desc:nth-child(5) {
  width: 45%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.operation-container {
  padding: 20rpx;
  background: #f5e9da;
  min-height: calc(100vh - 4rem);
}

.operation-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
}

.action-button-group {
  width: 14rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.action-button {
  background: #e95d2a;
  color: #fff;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: bold;
  padding: 10rpx 36rpx;
  margin: 10rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(233, 93, 42, 0.1);
  width: 200rpx;
  text-align: center;
  border: none;
}

.book-cover {
  width: 14rem;
  height: 19rem;
  background:
    repeating-linear-gradient(135deg, rgba(200, 190, 170, 0.08) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, #f3f3f3 80%, #e0d6c3 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 8px);
  border-radius: 18rpx;
  box-shadow:
    0 8rpx 32rpx rgba(191, 163, 107, 0.13),
    0 2rpx 8rpx #e0d6c3;
  position: relative;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}

.book-spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 18rpx;
  height: 100%;
  background: linear-gradient(90deg, #d1c3a3 60%, #e0d6c3 100%);
  border-top-left-radius: 18rpx;
  border-bottom-left-radius: 18rpx;
  box-shadow: 2rpx 0 8rpx #e0d6c3;
  z-index: 1;
}

.book-content {
  position: relative;
  z-index: 2;
  width: 92%;
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2.2rem 1.2rem 1.2rem 2.2rem;
  box-sizing: border-box;
  background: transparent;
}

.book-title {
  font-size: 1.5rem;
  color: #bfa36b;
  font-weight: bold;
  letter-spacing: 2rpx;
  text-align: left;
  margin-bottom: 1.2rem;
  user-select: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book-meta-group {
  width: 100%;
  margin-bottom: 1.2rem;
}

.book-meta {
  font-size: 0.8rem;
  color: #8c7b5a;
  margin-bottom: 0.3rem;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-desc {
  font-size: 0.8rem;
  color: #a89c7a;
  margin-top: 0.5rem;
  text-align: left;
  width: 100%;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  background: transparent;
}

.genealogy-list-container {
  background: #f5e9da;
  min-height: calc(100vh - 4rem);
  padding: 20rpx;
}

.nearby-families-section {
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  margin: 30rpx 0 30rpx 0;
  padding: 30rpx 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.title-desc {
  font-size: 24rpx;
  color: #666;
}

.nearby-families-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.nearby-family-card {
  display: flex;
  background: #f9f9f9;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  height: 10rem;
}

.nearby-family-card:hover {
  box-shadow: 0 6rpx 24rpx rgba(233, 93, 42, 0.18);
  transform: translateY(-4rpx) scale(1.02);
}

.nearby-cover {
  width: 120rpx;
  background: linear-gradient(180deg, #e95d2a 0%, #f5e9da 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.nearby-cover-title {
  color: #fff;
  font-size: 32rpx;
  writing-mode: vertical-rl;
  font-weight: bold;
  letter-spacing: 2rpx;
  line-height: 1.4;
  overflow: hidden;
}

.nearby-info {
  flex: 1;
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.nearby-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.nearby-desc {
  font-size: 26rpx;
}

.all-families-section {
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.08);
  margin-bottom: 30rpx;
  padding: 30rpx 20rpx;
}

.form-button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.familyForm {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(191, 163, 107, 0.1);
}
/* 修复行政区域标签对齐问题 */
/* :deep(.wd-form-item__label) {
    display: flex;
    align-items: center;
    height: 100%;
  } */

/* 确保所有表单项内容区域高度一致 */
:deep(.wd-form-item__content) {
  min-height: 44rpx;
  display: flex;
  align-items: center;
}

/* 修复wd-col-picker组件的高度对齐问题 */
:deep(.wd-col-picker) {
  display: flex;
  align-items: center;
}

:deep(.wd-col-picker__cell) {
  display: flex;
  align-items: center;
  padding: 0;
}

:deep(.wd-col-picker__value) {
  display: flex;
  align-items: center;
  line-height: 44rpx;
}

/* 行政区划显示样式 */
.area-display {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  cursor: pointer;
  border-bottom: 1rpx solid #e0e0e0;
}

.area-text {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.area-hint {
  font-size: 24rpx;
  color: #999;
}
</style>
